<!DOCTYPE html>
<!-- saved from url=(0039)https://www.zhangxinxu.com/sp/new-year/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业QQ - 新年用户关怀</title>
<link href="./企业QQ - 新年用户关怀_files/act-new-year2015.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="container" class="container">
	<div class="content" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">        
        <!-- 连接内外好友 -->
        <div id="scene2" class="scene">
          <div class="scene-in">
          	<div class="scene-images">
                <img class="scene2-bg" src="./企业QQ - 新年用户关怀_files/scene2-bg.png">
                <img class="scene2-boy" src="./企业QQ - 新年用户关怀_files/scene2-boy.png">
                <img class="scene2-cloud1" src="./企业QQ - 新年用户关怀_files/scene2-cloud1.png">
                <img class="scene2-cloud2" src="./企业QQ - 新年用户关怀_files/scene2-cloud2.png">
                <div class="animate scene2-cloud3">
                    <img src="./企业QQ - 新年用户关怀_files/scene2-cloud3.png">
                    <i class="animate scene2-2"></i>
                </div>
                <img class="scene2-egg1" src="./企业QQ - 新年用户关怀_files/scene2-egg1.png">
                <div class="animate scene2-egg2"><img src="./企业QQ - 新年用户关怀_files/scene2-egg2.png"></div>
                <img class="scene2-line" src="./企业QQ - 新年用户关怀_files/scene2-line.png">
                <img class="scene2-stone" src="./企业QQ - 新年用户关怀_files/scene2-stone.png">
            </div>
            <div class="scene-texts">
            	<div class="scene-vertical">
                    <h2 class="scene-title">连结内外好友</h2>
                    <p class="scene-desc">
                      <span class="hidden">你</span>首次登陆后第 <strong>2</strong> 天添加了第一位<span class="hidden">外部</span>好友<br>
                      小小的企业QQ<br>
                      把公司内外的小伙伴<span class="hidden">紧紧</span>连结在一起<br>
                    </p>
                  </div>
                  <i></i>
              </div>
              <a href="javascript:" id="scene2-down" class="scene-down" title="下一屏">下一屏</a>
          </div>
        </div>
                
        <!-- 内部员工 -->
        <div id="scene8" class="scene">
          <div class="scene-in">
          	<div class="scene-vertical">
                <img class="scene-title scene8-1" src="./企业QQ - 新年用户关怀_files/scene8-1.png">
                <p class="scene-desc">这些并肩奋斗的人们，<span class="hidden">可能是每天比和家人相处时间更长的人。<br></span>你的成就里，是否也有他们的帮助和努力？</p>
                <ul class="scene-person scene8-3">
                  <li><img src="./企业QQ - 新年用户关怀_files/pic-1.png"><span>王强</span></li>
                  <li><img src="./企业QQ - 新年用户关怀_files/pic-2.png"><span>Luna</span></li>
                  <li><img src="./企业QQ - 新年用户关怀_files/pic-3.png"><span>马老板</span></li>
                </ul>
                <div class="scene-space">
                    <div class="animate scene8-19"><img src="./企业QQ - 新年用户关怀_files/scene8-19.png"></div>
                    <div class="animate scene8-20"><img src="./企业QQ - 新年用户关怀_files/scene8-20.png"></div>
                    <div class="animate scene8-18"><img src="./企业QQ - 新年用户关怀_files/scene8-18.png"></div>
                    <div class="animate scene8-6"><img src="./企业QQ - 新年用户关怀_files/scene8-6.png"></div>
                    <div class="animate scene8-12"><img src="./企业QQ - 新年用户关怀_files/scene8-12.png"></div>
                    <div class="animate scene8-13"><img src="./企业QQ - 新年用户关怀_files/scene8-13.png"></div>
                    <div class="animate scene8-14"><img src="./企业QQ - 新年用户关怀_files/scene8-14.png"></div>
                    <div class="animate scene8-15"><img src="./企业QQ - 新年用户关怀_files/scene8-15.png"></div>
                    <div class="animate scene8-16"><img src="./企业QQ - 新年用户关怀_files/scene8-16.png"></div>
                    <div class="animate scene8-17"><img src="./企业QQ - 新年用户关怀_files/scene8-17.png"></div>                    
               	</div>
            </div><i></i>
          </div>
        </div>
        </div>
    </div>

<ul id="sceneCtrl" class="scene-ctrl">
  <li><a href="javascript:" data-index="0">1</a></li>
  <li><a href="javascript:" data-index="1">2</a></li>
</ul>

<script src="./企业QQ - 新年用户关怀_files/jquery-1.7.1.min.js.下载"></script>
<script src="./企业QQ - 新年用户关怀_files/iscroll.js.下载"></script>
<script>
if (window.addEventListener) {
	var newYearScroll = new IScroll("#container", {
		mouseWheel: true,
		momentum: false,
		snap: true
	})
} else {
	// IE7-IE8
	var newYearScroll = {
		content: $("#container > div"),
		currentPage: {
			pageY: 0
		},
		next: function() {
			this.currentPage.pageY++;
			var index = this.currentPage.pageY;
			if (index > 9) {
				index = 9;
				return this;
			}
			this.content.animate({
				top: -100 * index + "%"
			}, this.scrollEnd);
		},
		prev: function() {
			this.currentPage.pageY--;
			var index = this.currentPage.pageY;
			if (index < 0) {
				index = 0;
				return this;
			}
			this.content.animate({
				top: -100 * index + "%"
			}, this.scrollEnd)
		},
		goToPage: function(x, y) {
			this.currentPage.pageY = y;
			this.content.animate({
				top: -100 * y + "%"
			}, this.scrollEnd);
		},
		on: function(name, fn) {
			this[name] = fn;
		}
	}
}
$(".scene-down").on("click", function() {
	newYearScroll.next()
});
$("#sceneCtrl a").on("click", function() {
	newYearScroll.goToPage(0, $(this).attr("data-index") * 1)
});
newYearScroll.on("scrollEnd", function() {
	var pageY = newYearScroll.currentPage.pageY;
	$("#sceneCtrl .cur").removeClass("cur");
	$("#sceneCtrl a[data-index=" + pageY + "]").addClass("cur");
	$(".scene").eq(pageY).addClass("active");
});

$(document).bind("keyup", function(event) {
	var code = event.keyCode;
	if (code == 38) {
		newYearScroll.prev()
	} else if (code == 40) {
		newYearScroll.next()
	}
});

newYearScroll.goToPage(0, 0);
</script>


</body></html>